<template>
<view>
<view class="we7-bottom" :style="'background-color:' + tabBar.backgroundColor + ';border-color:' + tabBar.borderStyle" v-if="tabBar">
    <block v-for="(item, index) in tabBar.list" :key="index">
        <view class="we7-bottom-item" hoverClass="active" v-if="item.pageUrl=='/'+thisurl">
            <navigator hoverClass="active" open-type="redirect" :url="item.pagePath">
                <image class="item-img" mode="widthFix" :src="item.selectedIconPath"></image>
                <view class="item-text" :style="'color: ' + tabBar.selectedColor + ';'">{{item.text}}</view>
            </navigator>
        </view>
        <view class="we7-bottom-item" hoverClass="active" v-else>
            <navigator hoverClass="active" open-type="redirect" :url="item.pagePath">
                <image class="item-img" mode="widthFix" :src="item.iconPath"></image>
                <view class="item-text" :style="'color: ' + tabBar.tabBarcolor">{{item.text}}</view>
            </navigator>
        </view>
    </block>
</view>
<view class="we7-bottom-placeholder"></view>
</view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {};
  },

  components: {},
  props: {
    tabBar: {
      type: Object,
      default: app.globalData.tabBar
    }
  },
  created: function () {},
  methods: {}
};
</script>
<style>
@import "./footer.css";
</style>